<template>
	<view class="route">
		<!-- 头部 -->
		<view class="route-header">
			<!-- 内容 -->
			<view class="route-header-box">
				<view>
					<text class="iconfont route-header-box-title" @tap="goBack">&#xe6b0;</text>
					<text>路线</text>
				</view>
				<view>
<!-- 					<text class="iconfont">&#xe632;</text>
					<text class="iconfont">&#xeb86;</text> -->
				</view>
			</view>
		</view>
		<!-- 路线 -->
		<view class="route-route">
			<view class="route-route-box">
				<view>
					<view>
						<text class="iconfont green">&#xe60c;</text>
						<input class="border" type="text" placeholder="输入起点" v-model="fromVal">
					</view>
					<view>
						<text class="iconfont red">&#xe60c;</text>
						<input type="text" placeholder="输入终点" v-model="toVal">
					</view>
				</view>
				<text class="iconfont margin" @tap="addHistory">&#xe602;</text>
				<text class="iconfont" @tap="changeVal">&#xe609;</text>
			</view>
		</view>
		<!-- 出行方式 -->
		<view class="route-vehicle">
			<view v-for="i in vehicleData" :class="vehicleVal===i.name?'show':''" :data-val="i.name" @tap="changeVehicle">
				<text class="iconfont" v-html="i.img"></text>
				{{i.name}}
			</view>
		</view>
		<!-- 导航设置 -->
		<view class="route-navset">
			<text>导航设置</text>
			<view>
				点击设置<text class="iconfont">&#xe60d;</text>
			</view>
		</view>
		<!-- 路线预设 -->
		<view class="route-routeset">
			<view>
				<view>回家</view>
				<text>点击设置</text>
			</view>
			<view>
				<view>去公司</view>
				<text>点击设置</text>
			</view>
		</view>
		<!-- 车辆设置 -->
		<view class="route-carset">
			<view>
				<text>车辆设置</text>
				<view>
					24℃阴<text class="iconfont">&#xe60d;</text>
				</view>
			</view>
			<view>
				<view v-for="i in carSetData">
					<text :class="['iconfont',i.color]" v-html="i.img"></text>
					<view>{{i.name}}</view>
				</view>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="route-history">
			<view v-for="i in historyData">
				<text class="iconfont">&#xe60b;</text>
				<view>
					<text>{{i.from}}</text><text class="iconfont">&#xe601;</text><text>{{i.to}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromVal:"我的位置",
				toVal:"",
				vehicleData:[
					{index:1,name:'叫车',img:'&#xec6d;'},
					{index:2,name:'驾车',img:'&#xec6d;'},
					{index:3,name:'公交',img:'&#xe600;'},
					{index:4,name:'骑行',img:'&#xe786;'},
					{index:5,name:'步行',img:'&#xe636;'},
				],
				vehicleVal:"驾车",
				carSetData:[
					{index:1,name:'组队',color:'blue bold',img:'&#xe740;'},
					{index:2,name:'导航语音',color:'green',img:'&#xe664;'},
					{index:3,name:'违章查询',color:'orange',img:'&#xe648;'},
					{index:4,name:'离线地图',color:'blue',img:'&#xe7c4;'},
					{index:5,name:'更多',color:'gray',img:'&#xe626;'},
				],
				historyData:[
					{from:'我的位置',to:'华硕授权服务中心(锦华路四段)'},
					{from:'四河路',to:'华阳街道正北下街'},
					{from:'成都市青羊区万卉三路',to:'四川省成都市青羊区中坝街29号'},
				]
			}
		},
		methods: {
			/* 返回细胞运输页面 */
			goBack: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			/* 交换起始位置 */
			changeVal:function(){
				const fV = this.fromVal;
				const tV = this.toVal;
				this.fromVal = tV;
				this.toVal = fV;
			},
			/* 改变出行方式 */
			changeVehicle:function(e){
				if(this.vehicleVal===e.target.dataset.val){
					return
				}
				this.vehicleVal=e.target.dataset.val;
			},
			/* 添加历史记录 */
			addHistory: function(){
				const fV = this.fromVal;
				const tV = this.toVal;
				const that = this;
				if(fV&&tV){
					that.historyData = [...this.historyData,{from:fV,to:tV}];
				}
			}
		}
	}
</script>

<style scoped lang="less">
/* 引入color.less */
	@import url("../../../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../../../static/fontSize.less");

	/* 主体 */
	.route {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.route-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;

		/* 内容 */
		.route-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;



			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;
					/* 标题 */
					.route-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}
				}

				&:last-child {
					width: 186rpx;
				}

				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 路线 */
	.route-route{
		padding-top: 20rpx;
		padding-bottom: 15rpx;
		background-color: #FFFFFF;
		 .route-route-box{
			 display: flex;
			 width: 710rpx;
			 height: 150rpx;
			 flex-wrap: wrap;
			 align-items: center;
			 margin-left: 20rpx;
			 background-color: #F9F9F9;
			 border-radius: 20rpx;
			 &>view>view{
				 display: flex;
				 height: 75rpx;
				 align-items: center;
				 text{
					 margin: 0 28rpx;
					 font-size: @fontBiggest;
					 &.green{
						color: #0DC56F;
					 }
					 &.red{
						color: #EF3737;
					 }
				 }
				 input{
					 width: 458rpx;
					 height: 75rpx;
					 line-height: 75rpx;
					 &.border{
						 border-bottom: 1rpx solid #F1F1F1;
					 }
				 }
			 }
			&>text{
				font-size: @fontBigger;
				font-weight: 600;
				&.margin{
					margin: 0 20rpx;
				}
			}
		 }
	}
	
	/* 出行方式 */
	.route-vehicle{
		display: flex;
		height: 100rpx;
		padding: 0 15rpx;
		align-items: center;
		background-color: @colorWrite;
		&>view{
			display: flex;
			height: 55rpx;
			width: 144rpx;
			align-items: center;
			justify-content: center;
			color: #757575;
			text{
				margin-right: 8rpx;
				display: none;
			}
			&.show{
				background-color: #4287FF;
				color: @colorWrite;
				border-radius: 27rpx;
				text{
					display:inherit
				}
			}
		}
	}
	
	/* 导航设置 */
	.route-navset{
		display: flex;
		height: 100rpx;
		margin-top: 15rpx;
		align-items: center;
		justify-content: space-between;
		background-color: @colorWrite;
		&>text{
			font-weight: 500;
			text-indent: 20rpx;
		}
		&>view{
			display: flex;
			height: 100rpx;
			align-items: center;
			color: #A2A2A2;
			text{
				font-size: @fontBase;
				margin-left: 8rpx;
				margin-right: 20rpx;
			}
		}
	}
	
	/* 路线预设 */
	.route-routeset{
		display: flex;
		height: 152rpx;
		margin-top: 15rpx;
		align-items: center;
		background-color: @colorWrite;
		&>view{
			width: 354rpx;
			height: 107rpx;
			padding-top: 45rpx;
			padding-left: 20rpx;
			&:first-child{
				border-right: 2rpx solid #E4E4E4;
			}
			&>view{
				margin-bottom: 5rpx;
				font-size: @fontBig;
				font-weight: 500;
			}
			&>text{
				color: #818181;
			}
		}
	}

	/* 车辆设置 */
	.route-carset{
		margin-top: 15rpx;
		background-color: @colorWrite;
		&>view{
			&:first-child{
				display: flex;
				padding: 0 20rpx;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #E6E6E6;
				&>text{
					font-weight: 500;
				}
				&>view{
					display: flex;
					height: 100rpx;
					align-items: center;
					color: #A2A2A2;
					text{
						font-size: @fontBase;
						margin-left: 8rpx;
					}
				}
			}
			&:last-child{
				display: flex;
				height: 185rpx;
				align-items: center;
				&>view{
					width: 20%;
					text-align: center;
					text{
						font-size: 60rpx;
						margin-bottom: 28rpx;
						color: #858585;
						&.bold{
							font-weight: bold;
						}
						&.blue{
							color: #12A4DF;
						}
						&.green{
							color: #33B996;
						}
						&.orange{
							color: #EF6153;
						}
					}
					view{
						font-size: @fontSmall;
					}
				}
			}
		}
	}
	/* 历史记录 */
	.route-history{
		margin-top: 15rpx;
		background-color: @colorWrite;
		&>view{
			display: flex;
			align-items: center;
			color: #A6A6A6;
			&>text{
				display: flex;
				height: 100%;
				width: 105rpx;
				align-items: center;
				justify-content: center;
				font-size: @fontBig;
				font-weight: bold;
			}
			&>view{
				padding: 42rpx 0;
				width: 615rpx;
				border-bottom: 1rpx solid #EBEBEB;
				text.iconfont{
					padding: 0 8rpx;
					font-size: @fontSmall;
				}
				text:last-child{
					color: #171717;
				}
			}
		}
	}
</style>
